import Qust from "./qust.js";
const qust = Qust.create({
	baseUrl: "http://www.rushmc.top/api/",
});

function showModal(arg) {
	document.getElementById("modal").style.display = "flex";
	document.getElementById("modal-card").style.display = "block";
	document.getElementById("modal-title").innerText = arg.title;
	document.getElementById("modal-content").innerText = arg.content;
}

function hideModal() {
	document.getElementById("modal").style.animation = "fade-out 0.8s both";
	document.getElementById("modal-card").style.animation = "fade-up 0.5s reverse";
	setTimeout(() => {
		document.getElementById("modal").style.display = "none";
		document.getElementById("modal-card").style.display = "none";
		document.getElementById("modal").style.animation = "";
		document.getElementById("modal-card").style.animation = "";
	}, 500);
}

document.getElementById("modal-button").onclick = hideModal;

document.getElementById("toReg").onclick = () => {
	document.getElementById("login").style.animation = "fade-up 0.5s both reverse";
	setTimeout(() => {
		document.getElementById("login").style.display = "none";
		document.getElementById("register").style.animation = "";
		document.getElementById("register").style.display = "block";
	}, 400);
};

function toLogin() {
	document.getElementById("register").style.animation = "fade-up 0.5s both reverse";
	setTimeout(() => {
		document.getElementById("register").style.display = "none";
		document.getElementById("login").style.animation = "";
		document.getElementById("login").style.display = "block";
	}, 400);
}
document.getElementById("toLogin").onclick = toLogin;

// 登录提交
document.getElementById("submitLogin").onclick = () => {
	let username = document.getElementById("username").value;
	let password = document.getElementById("pwd").value;
	if (username == "" || password == "") {
		showModal({
			title: "填写错误",
			content: `请检查你的输入`,
		});
		return;
	}

	let data = new FormData();
	data.append("username", username);
	data.append("password", password);

	qust.request({
		url: "login",
		data,
	})
		.then((res) => {
			if (res.data.code === 200) {
				showModal({
					title: "登录成功",
					content: `${res.data.msg}\n你好：${res.data.data.name} ${res.data.data.phone}`,
				});
			} else {
				showModal({
					title: "登录失败",
					content: `${res.data.msg}`,
				});
			}
		})
		.catch(() => {
			showModal({
				title: "登录错误",
				content: "网络故障",
			});
		});
};

// 注册提交
document.getElementById("submitRegister").onclick = () => {
	let username = document.getElementById("regusername").value;
	let password = document.getElementById("regpwd").value;
	let name = document.getElementById("regname").value;
	let phone = document.getElementById("regphone").value;
	if (username == "" || password == "" || !/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(phone) || name == "") {
		showModal({
			title: "填写错误",
			content: `请检查你的输入`,
		});
		return;
	}

	let data = new FormData();
	data.append("username", document.getElementById("regusername").value);
	data.append("password", document.getElementById("regpwd").value);
	data.append("name", document.getElementById("regname").value);
	data.append("phone", document.getElementById("regphone").value);

	qust.request({
		url: "register",
		data,
	})
		.then((res) => {
			if (res.data.code === 200) {
				showModal({
					title: "注册成功",
					content: `${res.data.msg}`,
				});
				toLogin();
			} else {
				showModal({
					title: "注册失败",
					content: `${res.data.msg}`,
				});
			}
		})
		.catch(() => {
			showModal({
				title: "注册错误",
				content: "网络错误",
			});
		});
};
